<template>
    <div class="vdieoList">
        <div class="singerMvsList">
            <div class="mvsBox">
                <div class="mvsItme" v-for="item in videoList.data">
                    <div class="img-box">
                        <img :src="item.coverUrl" alt="" ref="videoimgs" />
                        <div class="mvs-info">
                            <div class="artisName">
                                {{ item.creator[0].userName }}
                            </div>
                            <div class="mvs-time">
                                {{ formatTime(item.durationms) }}
                            </div>
                        </div>
                        <div class="msv-playCount">
                            <i class="el-icon-caret-right"></i>
                            <span>{{ huansuan(item.playTime) }}</span>
                        </div>
                        <div class="hidden-play">
                            <div class="hidden-play">
                                <img
                                    src="../../assets/images/btn-play.png"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                    <div class="mvs-content">
                        <p>{{ item.title }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload, huansuan } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "searchDetails"
);
export default {
    created() {
        this.huansuan = huansuan;
        this.formatTime = formatTime;
    },
    computed: {
        ...mapState(["videoList", "searchType", "prevY"]),
    },
    methods: {
        ...mapActions(["search"]),
        ...mapMutations(["changePrevY"]),
    },
};
</script>

<style lang='scss' scoped>
img {
    width: 100%;
    height: 100%;
}
@import "../../assets/sass/singerMvList.scss";
</style>